<div class="da-personalize-config">
  <div class="da-personalize-title">
    <div class="da-title">{{ 'personalize.title' | translate }}</div>
  </div>
  <d-row [dGutter]="[12, 12]">
    <d-col *ngFor="let item of configs; let i = index" [dSpan]="8" [dOrder]="i">
      <div class="item">
        <div class="da-item-title">
          <!-- TODO: add prefix da- -->
          <div class="icon-content">
            <i class="icon" [ngClass]="item.icon"></i>
          </div>
          <span class="da-item-title-text">{{ 'personalize.' + item.name | translate }}</span>
        </div>
        <d-radio-group [name]="'theme'" [(ngModel)]="currentValue[item.name]" (change)="onChange(item.name, $event)">
          <d-radio [name]="item.name" *ngFor="let value of item.items" [value]="value.id">
            <span class="da-inline over-flow-ellipsis" [title]="'personalize.' + value.id | translate">{{
              'personalize.' + value.id | translate
            }}</span>
          </d-radio>
        </d-radio-group>
      </div>
    </d-col>
  </d-row>
  <d-row class="da-color-picker">
    <d-col class="themes" *ngFor="let theme of themeColors" [dSpan]="12">
      <div class="da-theme-name"><i class="icon {{ theme.icon }}"></i>{{ theme?.name }}</div>
      <d-row class="da-theme-colors">
        <div
          class="da-color-avatar"
          [ngClass]="{
            'is-active': customColor === color && customDark === theme.isDark
          }"
          *ngFor="let color of theme.colors"
          [style.backgroundColor]="color"
          (click)="selectColor(color, theme)"
        >
          <i class="icon icon-right" *ngIf="customColor === color && customDark === theme.isDark && currentTheme === themeType.Custom"></i>
        </div>
      </d-row>
    </d-col>
  </d-row>
</div>
